<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view v-if="!loadingone">
			<navbar name="调理改善"></navbar>
			<!-- 饮食 -->
			<view class="w706">
				<view class="ve-title">
					饮食建议
				</view>
				<view class="missionView">
					<view class="diet-view">
						<view class="diet-titlev">
							<view class="diet-title">
								饮食+
							</view>
						</view>
						<view class="diet-uview">
							<image class="diet-image"
								src="http://static.bsyjk.cn/indicators/43BFCCC7BD1640C49E79297BA2A921FB.png">
							</image>
							<view class="yb-view porheb">
								每周不少于
								<view class="view-bold ellipsis">
									{{result.goodFoods.weekFoodMin}}种
								</view>
							</view>
							<view class="yb-view">
								每日不超过
								<view class="view-bold ellipsis">
									{{result.goodFoods.dateFoodMax}}千卡
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="diet-flex">
					<view class="flex-viewys" v-for="(item,idx) in result.goodFoods.foods" :key="idx"
						@tap.stop="navurl('/pages/subpackage/find/foodMaterial/foodMaterial?id='+item.id+'&count=4')">
						<view class="flod-image">
							<u-lazy-load height="100" border-radius="20" img-mode="aspectFill"
								:image="item.foodImageUrl"></u-lazy-load>
						</view>
						<view class="food-name">
							<view class="title ellipsis">
								{{item.food}}
							</view>
							<!-- {{item.kg}} -->
						</view>
					</view>
				</view>
			</view>
			<!-- 运动 -->
			<view class="w706">
				<view class="ve-title">
					运动建议
				</view>
				<view class="missionView">
					<view class="diet-view">
						<view class="diet-titlev">
							<view class="diet-title">
								运动+
							</view>
						</view>
						<view class="diet-uview">
							<image class="diet-image"
								src="http://static.bsyjk.cn/indicators/F8154F86D85B4ECE9C36A8E694FFDD70.png">
							</image>
							<view class="yb-view porheb">
								每周不少于
								<view class="view-bold">
									{{result.goodSport.weekSportMin||'5'}}次
								</view>
							</view>
							<view class="yb-view">
								每日不超过
								<view class="view-bold">
									{{result.goodSport.dateSportMax||'2小时30分'}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<scroll-view scroll-x="true" style="white-space: nowrap;display: flex;">
					<block v-for="(item,idx) in result.goodSport.sports" :key="idx">
						<view class="exercise-load">
							<u-lazy-load height="214" border-radius="20" img-mode="aspectFill"
								:image="item.classImageUrl"></u-lazy-load>
							<view class="popupbg05 ellipsis">
								{{item.name}}
							</view>
							<!-- 	<view class="exercise-time">
								30-40分钟
							</view> -->
						</view>
					</block>
				</scroll-view>
			</view>
			<!-- 睡眠建议 -->
			<view class="w706">
				<view class="ve-title">
					睡眠建议
				</view>
				<view class="content-text" v-if="result.goodSleep.advice">
					<!-- {{result.goodSleep.advice}} -->
					<u-parse :html="result.goodSleep.advice"></u-parse>
					<!-- 您的入睡时间不太规律，请尽量保持规律作息，及时加班到很晚，也要设定一个固定的睡觉时间，如果做不到，也可以睡半小时再起来，人类大脑中的视交叉上控制着身体的昼夜节律，对睡眠、体温、激素分泌、新陈代谢等活动有着重要的影响。每天在固定时间入睡，有助于保持恒定的昼夜规律，并容易引起睡眠 -->
				</view>
				<view v-if="!result.goodSleep.advice" class="noneJianyi">
					暂无建议
				</view>
			</view>
			<!-- 睡眠建议 -->
			<view class="w706">
				<view class="ve-title">
					心理建议
				</view>
				<view class="content-text" v-if="result.goodPsychology">
					<!-- {{result.goodPsychology}} -->
					<rich-text :nodes="result.goodPsychology"></rich-text>
					<!-- 你悲伤抑郁时不妨向朋友倾诉；也可以进行一项你喜爱的运动；或在空旷的原野上大声喊叫，既能呼吸新鲜空气，又能宣泄积郁。 -->
				</view>
				<view v-if="!result.goodPsychology" class="noneJianyi">
					暂无建议
				</view>
			</view>
			<!-- 改善搭配 -->
			<view class="w706 suggest" v-if="result.recommendedGoods && result.recommendedGoods.length!=0">
				<view class="ve-title">
					改善搭配
				</view>
				<scroll-view scroll-x="true" class="scrollViews">
					<view class="weui-flex">
						<view v-for="(item,index) in result.recommendedGoods" :key="index" class="dbox-wiew marrad20">
							<navigator target="miniProgram" open-type="navigate" app-id="wxeb719b5bc850729e"
								:path="item.detailUrl" extra-data="" version="release" hover-class="hoverbgfff">
								<view class="wiewImage">
									<u-lazy-load height="224" border-radius="10" img-mode="aspectFill"
										:image="item.goodsImageUrl"></u-lazy-load>
								</view>
								<view class="view-title">
									<!-- 每一口都是健康的复合固体蛋白饮料 -->
									{{item.title}}
								</view>
								<view style="padding:0 20upx;">
									<view class="commodity-price">
										¥{{item.salePrice}}
									</view>
									<view class="sales-volume">
										月销{{item.goodsSlogan}}
									</view>
								</view>
							</navigator>
						</view>
						<!-- <view class="dbox-wiew">
						<view class="wiewImage">
							<u-lazy-load height="224" border-radius="10" img-mode="aspectFill" image=""></u-lazy-load>
						</view>
						<view class="view-title">
							每一口都是健康的复合固体蛋白饮料
						</view>
						<view style="padding:0 20upx;">
							<view class="commodity-price">
								¥378
							</view>
							<view class="sales-volume">
								月销2011
							</view>
						</view>
					</view> -->
					</view>
				</scroll-view>
			</view>

			<!-- 健康百科 -->
			<view class="w706" v-if="result.goodArticles && result.goodArticles.length!=0">
				<view class="ve-title">
					健康百科
					<view class="moreAll" @tap.stop="navurl('/pages/subpackage/find/cyclopedia/cyclopedia')">
						更多
					</view>
				</view>
				<scroll-view scroll-x="true" class="scrollViews">
					<block v-for="(item,idx) in result.goodArticles" :key="idx">
						<view class="weui-flex articleBody"
							@tap.stop="navurl('/pages/subpackage/find/articleDetails/details?id=' + item.articleId)">
							<view class="articleView">
								<view class="articleContent text-line">
									{{item.articleTitle}}
								</view>
								<view class="lockbody">
									<view class="lockView"></view>{{item.readNum}}
								</view>
							</view>
							<view class="articleImage">
								<u-lazy-load border-radius="10" height="160" img-mode="aspectFill"
									:image="item.coverUrl">
								</u-lazy-load>
							</view>
						</view>
						<u-line class="u-line"></u-line>
					</block>
				</scroll-view>
			</view>
			<!-- 健康讲堂 -->
			<view class="w702 encyclopedia" style="margin-top:30upx;" v-if="result.goodVideos&&result.goodVideos.length!=0">
				<view class="weui-flex">
					<view class="weui-flex__item">
						<view class="placeholder titlel">
							健康讲堂
							<view class="moreAll2" @tap.stop="navurl('/pages/subpackage/find/classList/classList')">
								更多
							</view>
						</view>
					</view>
				</view>
				<scroll-view scroll-x="true" class="scrollViews">
					<block v-for="(item,idx) in result.goodVideos" :key="idx">
						<!-- @tap.stop="userSwc(item,idx)" -->
						<view class="scrollView"
							@tap.stop="navurl('/pages/subpackage/find/video-detail/video-detail?id='+item.albumId)">
							<image :src="item.videoCoverUrl" mode="" style="width: 100%;height: 100%;"></image>
						</view>
					</block>
					<view style="width: 90rpx;display: inline-block;">
					</view>
				</scroll-view>
			</view>
			<!-- end -->
			<view class="w706">
				<view class="ve-title">
					改善计划
					<view class="Jointheplan"
						@tap.stop="navurl('/pages/subpackage/find/planDetails/planDetails?taskId='+result.improvePlanInfo.taskId)">
						<image class="Jointheplan-image"
							src="http://static.bsyjk.cn/planicon/FE337342BCD34F65B344B01D9FB2CD67.png"></image>加入计划
					</view>
				</view>
				<view class="card-box">
					<image class="planImage" :src="result.improvePlanInfo.taskImage" mode=""
						@tap.stop="navurl('/pages/subpackage/find/planDetails/planDetails?taskId='+result.improvePlanInfo.taskId)">
					</image>
					<view class="planImage-flex">
						<view class="flex-viewl">
							{{result.improvePlanInfo.taskName}}
						</view>
						<view class="flex-viewr">
							计划天数：{{result.improvePlanInfo.taskPeriod}}天
						</view>
					</view>
				</view>

			</view>
			<!-- <view class="go-text" @tap.stop="navurl('/pages/subpackage/home/major/major')">
			</view> -->
		</view>
	</view>
</template>

<script>
import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"
import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"
import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"
import uParse from "@/uview-ui/components/u-parse/u-parse.vue"
import uSearch from "@/uview-ui/components/u-search/u-search.vue"
import uTabs from "@/uview-ui/components/u-tabs/u-tabs.vue"
import uPopup from "@/uview-ui/components/u-popup/u-popup.vue"
import uLineProgress from "@/uview-ui/components/u-line-progress/u-line-progress.vue"
	export default {
		components: {
			uLoading,
			uLazyLoad,
			uLine,
			uParse,
		},
		data() {
			return {
				userAnsId: '', //报告id
				loadingone: false,
				result: '', //数据
				vudioArr: [{},
					{}
				],
				articleList: [{
						image: '',
						content: '对糖尿病人来说，米饭不能吃饱，水果不能吃多，甜品对糖尿病人来说，米饭不能吃饱，水果不能吃多，甜品',
						lock: 8400
					},
					{
						image: '',
						content: '对糖尿病人来说，米饭不能吃饱，水果不能吃多，甜品对糖尿病人来说，米饭不能吃饱，水果不能吃多，甜品',
						lock: 8400
					}
				],
				exerciseList: [{}, {}, {}, {}, {}, {}, {}],
			}
		},
		onLoad(e) {
			// e.userAnsId
			this.userAnsId = 3 //报告id
			// for (let key in e) {
			// 	if (e.hasOwnProperty(key)) {
			// 		e[key] = JSON.parse(e[key])
			// 	}
			// }
			// this.result = e
			// console.log(e)
			this.userAnswer()
		},
		methods: {
			//跳转地址
			navurl(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 获取详情
			userAnswer() {
				this.loadingone = true;
				let _this = this;
				this.$api.get(global.apiUrls.userAnswer + '/' + uni.getStorageSync(global.IS_DEV ? 'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId + '/' + this
					.userAnsId, {}).then(res => {
					if (res.data.code == 1000) {
						let result = res.data.result;
						result.goodFoods = JSON.parse(result.goodFoods)
						let dianindex = result.goodFoods.dateFoodMax.indexOf(".")
						if (result.goodFoods.dateFoodMax.startsWith('.', dianindex)) {
							result.goodFoods.dateFoodMax = result.goodFoods.dateFoodMax.substring(0, result
								.goodFoods.dateFoodMax.indexOf(".") + 2)
						}
						// result.goodFoods.dateFoodMax = result.goodFoods.dateFoodMax.toFixed(1)
						result.goodSleep = JSON.parse(result.goodSleep)
						result.goodSport = JSON.parse(result.goodSport)
						result.improvePlanInfo = JSON.parse(result.improvePlanInfo)
						result.kindScore = JSON.parse(result.kindScore)
						result.recommendedGoods = JSON.parse(result.recommendedGoods)
						result.riskDisease = JSON.parse(result.riskDisease)
						result.goodArticles = JSON.parse(result.goodArticles).slice(0, 2)
						if (result.goodVideos) {
							result.goodVideos = JSON.parse(result.goodVideos)
						}
						console.log(result)
						_this.result = result;
					}
					this.loadingone = false; //懒加载动画
				})
			}
		}
	}
</script>

<style lang="scss">
	.w706 {
		width: 706upx;
		background: #fff;
		margin: 30upx auto 0;
		padding: 20upx;
		border-radius: 25upx;
	}

	.marrad20 {
		margin-right: 20upx;
	}

	.ve-title {
		height: 100upx;
		line-height: 80upx;
		font-size: 36upx;
		font-weight: bold;
		color: #333333;
		padding-left: 40upx;
		position: relative;
	}

	.ve-title::before {
		content: '';
		position: absolute;
		top: 24upx;
		left: 4upx;
		width: 10upx;
		height: 36upx;
		background: #2EA7E0;
		border-radius: 5upx;
	}

	.missionView {
		padding: 23upx 0 20upx;
		background: url(http://static.bsyjk.cn/wzbg/0C3E40EE999042308BEF57E2A1010C37.png)no-repeat;
		background-size: 100% 100%;
		margin-bottom: 30upx;
		box-sizing: border-box;
		box-shadow: 0px 12upx 24upx 0px rgba(0, 0, 0, 0.06);
		position: relative;

		.diet-view {
			width: 630upx;
			height: 167upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin: 0 auto;
			padding: 0 20upx;

			.diet-titlev {
				height: 70upx;

				.diet-title {
					min-width: 79upx;
					height: 36upx;
					display: inline-block;
					padding: 0 10upx;
					background: #FF8F1F;
					border-radius: 4upx;
					margin: 20upx 0 10upx;
					color: #fff;
				}
			}
		}
	}

	.diet-uview {
		display: flex;

		.diet-image {
			width: 55upx;
			height: 55upx;
			margin-top: 14upx;
			background-color: #fff;
		}

		.yb-view {
			padding-left: 25upx;
			width: 227upx;
			font-size: 24upx;
			font-weight: 500;
			color: #051D3F;
			line-height: 41upx;

			.view-bold {
				font-size: 34upx;
			}
		}

		.porheb {
			position: relative;
		}

		.porheb:before {
			content: '';
			width: 1upx;
			height: 78upx;
			background: #F5F5F5;
			border: 1px solid #E2E1E2;
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.diet-flex {
		display: flex;
		width: 673upx;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-left: 8upx;

		.flex-viewys {
			width: 220upx;
			height: 100upx;
			margin-top: 27upx;
			display: flex;

			.flod-image {
				width: 100upx;
				height: 100upx;
			}

			.food-name {
				width: 50%;
				padding-left: 10upx;
				font-size: 24upx;
				font-weight: 400;
				color: #4A4A4A;
				line-height: 33upx;

				.title {
					font-size: 24upx;
					font-weight: 600;
					color: #4A4A4A;
					line-height: 80upx;
					padding-top: 10upx;
				}
			}
		}
	}

	.exercise-load {
		display: inline-block;
		width: 215upx;
		height: 250upx;
		margin-right: 16upx;
		text-align: center;

		.popupbg05 {
			width: 215upx;
			height: 55upx;
			line-height: 55upx;
			position: absolute;
			top: 160upx;
			background: rgba(0, 0, 0, 0.4);
			border-radius: 0 0 20upx 20upx;
			color: #fff;
		}

		.exercise-time {
			height: 80upx;
			line-height: 80upx;
			font-size: 24upx;
			font-weight: 400;
			color: #4A4A4A;
		}
	}

	.content-text {
		font-size: 36upx;
		font-weight: 300;
		color: #333333;
		line-height: 64upx;
	}

	.articleBody {
		padding: 30upx 26upx;
	}

	.articleImage {
		width: 200upx;
		height: 160upx;
	}

	.articleContent {
		width: 440upx;
		height: 84upx;
		font-size: 30upx;
		font-weight: 500;
		color: #333333;
		line-height: 42upx;
	}

	.lockbody {
		padding: 45upx 0 0;
		font-size: 26upx;
		font-weight: 400;
		color: #999999;
		line-height: 37upx
	}

	.lockView {
		width: 50upx;
		height: 28upx;
		background: #C0C4CC;
		float: left;
		background: url(http://static.bsyjk.cn/seeIcon/37C6382B372045CCB803A7F2DE1D24EA.png)no-repeat;
		background-size: 44upx 28upx;
	}

	.suggest {
		padding: 23upx 27upx 30upx;
	}

	.see-task {
		height: 74upx;
		line-height: 74upx;
		text-align: center;
		font-size: 22upx;
		font-weight: 400;
		color: #9B9B9B;

		.see-icon {
			position: relative;
		}

		.see-icon:before {
			content: '';
			width: 25upx;
			height: 25upx;
			position: absolute;
			top: 4upx;
			left: -30upx;
			background: url(https://bsyjk-pic.bsyjk.cn/duigicon/338DE8F43F2B4023BE5AD2E074A206DA.png)no-repeat;
			background-size: 25upx 25upx;
		}
	}

	.dbox-wiew {
		width: 321upx;
		height: 399upx;
		background: #F5F5F5;
		border-radius: 16upx;

		.wiewImage {
			width: 321upx;
			height: 224upx;
		}

		.view-title {
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			line-height: 42upx;
			padding: 12upx 22upx 19upx;
		}

		.commodity-price {
			font-size: 26upx;
			font-weight: 500;
			color: #F56767;
			line-height: 37upx;
			float: left;
		}

		.sales-volume {
			font-size: 24upx;
			font-weight: 400;
			color: #999999;
			line-height: 33upx;
			float: right;
		}
	}

	.encyclopedia {
		margin: 135upx auto 0;
		padding: 24upx;
		box-sizing: border-box;
		border-radius: 16upx;
		opacity: 0.9;

		.imgr {
			width: 200upx;
			height: 160upx;
		}

		.titlel {
			height: 42px;
			font-size: 36upx;
			font-weight: bold;
			color: #333333;
			line-height: 42upx;
		}

		.contentStyle {
			width: 440upx;
			height: 84upx;
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			line-height: 42upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.lookbf {
			height: 37upx;
			font-size: 26upx;
			font-weight: 400;
			color: #999999;
			line-height: 37upx;
			position: relative;
			left: 60upx;
		}

		.lookbf:before {
			content: '';
			width: 44upx;
			height: 28upx;
			position: absolute;
			top: 4upx;
			left: -60upx;
			background-size: 44upx 28upx;
		}

		.belowLine {
			position: relative;
		}

		.belowLine:before {
			content: '';
			width: 100%;
			height: 2upx;
			position: absolute;
			bottom: 0;
			background: #EEEEEE;
			opacity: 0.9;
		}
	}

	.scrollViews {
		white-space: nowrap;
		display: flex;

		.scrollView {
			width: 317upx;
			height: 221upx;
			background: pink;
			display: inline-block;
			margin-right: 20upx;
			border-radius: 10upx;
			position: relative;
		}

		.scrollView:before {
			content: '';
			width: 41upx;
			height: 41upx;
			position: absolute;
			z-index: 1;
			bottom: 9upx;
			right: 11upx;
			background: url(http://static.bsyjk.cn/vidioplay/2B8379F67F904AFB90B7C7413DF6E528.png)no-repeat;
			background-size: 41upx 41upx;
		}
	}

	.Jointheplan {
		width: 166upx;
		height: 44upx;
		// background: linear-gradient(112deg, #81C042 0%, #2EA7E0 100%);
		background: url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png)no-repeat;
		background-size: 100% 100%;
		border-radius: 42upx;
		border: 1upx solid #2EA7E0;
		font-size: 24upx;
		line-height: 44upx;
		color: #fff;
		position: absolute;
		right: 0;
		top: 25upx;

		.Jointheplan-image {
			width: 28upx;
			height: 28upx;
			// background: #FFFFFF;
			display: block;
			float: left;
			margin: 6upx 10upx 0 10upx;
		}
	}



	.card-box {
		width: 675upx;
		height: 214upx;
		border-radius: 15upx;
		overflow: hidden;
		position: relative;

		.planImage {
			width: 675upx;
			height: 214upx;
			border-radius: 15upx;
		}

		.planImage-flex {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			display: flex;
			color: #fff;
			opacity: 0.64;
			background: linear-gradient(164deg, #BD995E 0%, #000000 100%);
			border-radius: 0 0 30upx 30upx;
			padding: 0 20upx;

			.flex-viewl,
			.flex-viewr {
				width: 50%;
			}

			.flex-viewr {
				text-align: right;
			}
		}

	}



	.go-text {
		width: 582upx;
		height: 105upx;
		line-height: 105upx;
		// background-color:pink;
		margin: 33upx auto 74upx;
		text-align: center;
		font-size: 30upx;
		background: url(http://static.bsyjk.cn/improvebtn/6633F2D7B7DD48C891E020F766C5F416.png)no-repeat;
		background-size: 582upx 105upx;
	}

	.moreAll,
	.moreAll2 {
		height: 80upx;
		font-size: 26upx;
		font-weight: 400;
		color: #999999;
		line-height: 80upx;
		float: right;
		padding-right: 42upx;
		position: relative;
	}

	.moreAll:before,
	.moreAll2:before {
		content: '';
		position: absolute;
		top: 20upx;
		right: 0upx;
		width: 36upx;
		height: 36upx;
		background: url(https://bsyjk-pic.bsyjk.cn/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
		background-size: 36upx 36upx;
	}

	.moreAll2 {
		height: 60upx;
		font-size: 26upx;
		font-weight: 400;
		color: #999999;
		line-height: 60upx;
	}

	.moreAll2:before {
		top: 10upx;
	}

	.noneJianyi {
		font-size: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-weight: bold;
	}
</style>
